<template>
  <wsPage title="新增优惠码">
    <div slot="page_operate">
      <Button @click="goBack">
        <Icon type="ios-arrow-back"></Icon><span>返回</span>
      </Button>
    </div>
    <wsPanel>
      <template slot="panel_head_title">新增优惠码</template>
      <div
        slot="panel_body"
        class="ws-form-div"
      >
        <div class="ws-form-div-form">
          <div class="step-data">
            <Form
              class="myForm"
              ref="modalForm"
              :model="modal.form"
              :rules="modal.validate"
              :label-width="100"
            >
              <FormItem
                label="优惠码"
                prop="name"
              >
                <Input
                  class="myinput"
                  placeholder="后台自动生成6-8位优惠码(中英文随机生成)"
                  v-model="modal.form.discountCode"
                  style="width:30%"
                  autofocus
                ></Input>
                <Button @click="createCode">生成</Button>
              </FormItem>
              <FormItem
                label="减免金额"
                placeholder="￥"
                prop="couponAmount"
              >
                <Input
                  class="myinput"
                  v-model="modal.form.price"
                  autofocus
                ></Input>
              </FormItem>
              <FormItem
                label="分销人"
                prop="satisfyAmount"
              >
                <Input
                  class="myinput"
                  v-model="modal.form.distributor"
                  autofocus
                ></Input>
              </FormItem>
              <FormItem label="有效期"
               prop="dealineDate">
                  
                <Row>
                  <Col span="2">
                  <FormItem>
                    <DatePicker
                      type="date"
                      placeholder="开始时间"
                      v-model="modal.form.startDate"
                      @on-change="handlechange"
                    ></DatePicker>
                  </FormItem>
                  </Col>
                  <Col
                    class="subtract"
                    span="1"
                  >-</Col>
                  <Col span="2">
                  <FormItem>
                    <DatePicker
                      type="date"
                      placeholder="结束时间"
                      v-model="modal.form.endDate"
                      @on-change="handlechangend"
                    ></DatePicker>
                  </FormItem>
                  </Col>
                </Row>
              </FormItem>
              <FormItem>
                <Button
                  type="primary"
                  @click="confirm"
                >确定</Button>
                <Button @click="goBack">取消</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </wsPanel>
  </wsPage>
</template>

<script>
import Util from "../../../common/util.js";
import Common from "../../../common/common.js";
import FileUtil from "../../../common/file.js";
import productQuery from "../appCategory/productQuery";

export default {
  components: {
    productQuery
  },
  data() {
    return {
      //新增属性弹框
      modal: {
        show: false,
        form: {
          discountCode : '',//优惠码  
          price:'',//减免金额
          distributor: "",//分销人
          startDate:'',//有效开始时间
          endDate:'',//有效结束时间 
        },
        upload: {
          key: ""
        },
        validate: {
          name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
          couponAmount: [
            { required: true, message: "面值不能为空", trigger: "blur" }
          ],
          satisfyAmount: [
            { required: true, message: "满足金额不能为空", trigger: "blur" }
          ],
          // publishNum: [
          //     { required: true, message: '发布数量不能为空', trigger: 'blur'}
          // ],
          codeFlag: [{ required: true, message: "必须选择" }],
          dealineDate: [{ required: true, message: "截止日期不能为空" }]
        },
        table: {
          data: [], //主题项记录
          productData: [] //主题项商品记录
        }
      },
      modalItem: {
        show: false,
        editIndex: -1, //当前编辑元素为-1
        title: "新增主题项",
        form: {
          content: ""
        }
      },
      cropper: {
        show: false,
        datas: {
          top: {
            base64: ""
          },
          cover: {
            base64: ""
          }
        },
        config: {
          fixedNumber: [27, 20],
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 375,
          autoCropHeight: 278
        }
      },
      //文本编辑器
      productModal: {
        show: false,
        title: "选择商品",
        table: {
          data: []
        }
      },
      productQueryModal: {
        show: false,
        title: "选择商品"
      },
      fields: {
        languages: [],
        types: ["轮播主题", "推荐主题", "单图主题", "商品关联主题"]
      }
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    handlechange(date){
      this.form.startDate = date;
    },//开始时间
    handlechangend(date){
      this.form.endDate = date;
    },//结束时间  
    createCode(){
        console.log(this.modal.form.name)
      let _this = this;
      this.axios.get("").then(response => {
        var res = response.data;
        var resMeta = res.meta;
          if(0 == resMeta.code){
           _this.form.name = 123456//待完成
          }
      })
    },//生成优惠码
    init() {
      this.initLanguages();
    },
    /**
     * 初始化可翻译的语言列表
     */
    initLanguages() {
      let _this = this;
      this.axios.get("/ws/ops/v2/languages/translatable").then(response => {
        var res = response.data;
        var resMeta = res.meta;
        if (0 == resMeta.code) {
          _this.fields.languages = res.data;
        } else {
          _this.$Message.warning(resMeta.message);
        }
      });
    },
    /**
     * 返回
     */
    goBack() {
      this.$router.push({ name: "ops_discountCode_list" });
    },
    /**
     * 模态框保存
     */
    modalSave() {
      if (-1 == this.modalItem.editIndex) {
        //新增
        this.submitAddModal();
      } else {
        this.submitEditModal();
      }
    },
    /**
     * 提交新增的模态框
     */
    submitAddModal() {
      let content = this.$refs["ue"].getUEContent();
      console.log(content);
      if (Util.vad.isBlank(content)) {
        this.$Message.info("请添加主题内容哦");
        return;
      }
      this.modal.table.data.push({
        title: "主题项",
        content: content,
        productNum: 0
      });
      //同时新增一条商品列表记录
      this.modal.table.productData.push({});
      this.modalItem.show = false;
    },
    /**
     * 提交编辑编辑框
     */
    submitEditModal() {
      let index_ = this.modalItem.editIndex;
      let content = this.$refs["ue"].getUEContent();
      this.modal.table.data[index_].content = content;
      this.modalItem.show = false;
    },
    /**
     * 模态框取消
     */
    modalCancel() {
      this.modalItem.show = false;
    },
    /**
     *确定表单
     */
    confirm() {
      let _this = this;
      let form = {
          discountCode : this.form,//优惠码  
          price:this.form.price,//减免金额
          distributor: this.form.distributor,//分销人
          startDate:this.form.startDate,//有效开始时间
          endDate:this.form.endDate,//有效结束时间 
      };
          this.axios.post("/ws/ops/discountCode/addDisCode", form).then(function(response) {
        let res = response.data;
        if (0 === res.meta.code) {
          _this.$Message.success("发布优惠券成功");
          _this.$router.push({ name: "ops_discountCoupon_management_list" });
        } else {
          let message_ = res.meta.message;
          _this.$Message.warning("发布优惠券失败:" + message_);
        }
      });
    },

    uploadSuccess(response, file, fileList) {
      console.log(response);
      if (0 == response.meta.code) {
        this.modal.form.imgUrl = response.data.pubFileUrl;
        this.modal.upload.key = response.data.fileId;
      }
    }
  }
};
</script>

<style scoped>
.myForm .myinput {
  width: 180px;
}
</style>